<template>
  <!-- 车型管理弹出层 -->
  <el-dialog width="600px" :visible="visible" :title="carFormData.id ? '编辑车型' : '新增车型'" @close="$emit('update:visible',false)">
    <el-form ref="carForm" label-width="110px" label-position="right" style="width: 100%" :model="carFormData" :rules="rules">
      <el-form-item label="车辆类型" prop="name">
        <el-input v-model="carFormData.name" placeholder="请输入车辆类型" />
      </el-form-item>
      <el-form-item label="应载重量" prop="allowableLoad">
        <el-input v-model="carFormData.allowableLoad" placeholder="请输入车型载重">
          <template #suffix>
            <span>吨</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="应载体积" prop="allowableVolume">
        <el-input v-model="carFormData.allowableVolume" placeholder="请输入车型应载体积">
          <template #suffix>
            <span>立方</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="长" prop="measureLong">
        <el-input v-model="carFormData.measureLong" placeholder="请输入车型长度">
          <template #suffix>
            <span>米</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="宽" prop="measureWidth">
        <el-input v-model="carFormData.measureWidth" placeholder="请输入车型宽度">
          <template #suffix>
            <span>米</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="高" prop="measureHigh">
        <el-input v-model="carFormData.measureHigh" placeholder="请输入车型高度">
          <template #suffix>
            <span>米</span>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button type="primary" class="submitBtn" @click="onsubmit">确认</el-button>
      <el-button plain @click="$emit('update:visible', false)">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addCarAPI, carDetailsAPI, editVehicleAPI } from '@/api/carRegulate'

export default {
  name: 'VehicleDialog',
  props: { visible: Boolean },
  data() {
    return {
      carFormData: {
        allowableLoad: '',
        allowableVolume: '',
        measureHigh: '',
        measureLong: '',
        measureWidth: '',
        name: ''
      },

      // 表单验证
      rules: {
        allowableLoad: [{ required: true, message: '准载重量不能为空', trigger: 'blur' }],
        allowableVolume: [{ required: true, message: '准载体积不能为空', trigger: 'blur' }],
        measureHigh: [{ required: true, message: '高不能为空', trigger: 'blur' }],
        measureLong: [{ required: true, message: '长不能为空', trigger: 'blur' }],
        measureWidth: [{ required: true, message: '宽不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '车辆类型名称不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.carFormData = {
          allowableLoad: '',
          allowableVolume: '',
          measureHigh: '',
          measureLong: '',
          measureWidth: '',
          name: ''
        }
      }
    }
  },
  methods: {
    async onsubmit() {
      this.$refs.carForm.validate().then(async() => {
        if (this.carFormData.id) {
          await editVehicleAPI(this.carFormData)
        } else {
          await addCarAPI(this.carFormData)
        }
        this.$message.success(this.carFormData.id ? '编辑车辆成功' : '新增车辆成功')
        this.$emit('update')
        this.$emit('update:visible', false)
      }, (err) => {
        console.log('err  ----->  ', err)
      })
    },
    // 编辑数据回填
    async carEdit(id) {
      const res = await carDetailsAPI(id)
      console.log('res  ----->  ', res.data)
      this.carFormData = res.data
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__header{
  padding: 15px 30px 15px;
  background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
}
::v-deep .el-dialog{
  border-radius: 8px;
}
::v-deep .el-form{
  padding-right: 40px;
  margin-top: 10px;
}
::v-deep .el-button{
  width: 90px;
  border-radius: 5px;
  font-weight: 400;
  margin-top: 10px;
}
::v-deep .el-button.submitBtn{
  color: #fff;
  background-color: #e15536;
  border: 1px solid #e15536;
}
::v-deep .el-input__suffix-inner{
  color: rgb(32, 35, 42);
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    margin-right: 14px;
}
</style>
